<template>
  <div class="U000042-template1" :class="className">
    <!-- style -->
    <div v-html="css"></div>

    <!--定金阶梯团静态-->
    <div class="lottery-box" v-if="datas.deposit">
      <div class="activity-panel">
        <div class="activety-goods-title-bg"></div>
        <div class="activity-head">
          <div class="title">{{datas.deposit.name || ''}}</div>
          <div class="time">
            距离活动开始还有
            <span class="acitvity-relative-time-el">xx</span>天
            <span class="acitvity-relative-time-el">xx</span>:
            <span class="acitvity-relative-time-el">xx</span>:
            <span class="acitvity-relative-time-el">xx</span>
          </div>
        </div>
        <img :src="depositTopImage" alt="">
      </div>

      <div class="activity-panel">
        <div class="panel-title">
          <div class="panel-title-decoration">
            <div class="panel-title-decoration-item"></div>
            <div class="panel-title-decoration-item"></div>
          </div>
          活动规则
          <div class="panel-title-decoration">
            <div class="panel-title-decoration-item"></div>
            <div class="panel-title-decoration-item"></div>
          </div>
        </div>
        <img :src="depositBottomImage" alt="">
      </div>

      <div class="reword">立即下定</div>
    </div>


  </div>
</template>

<script>
	import emptyImage from "@/resource/images/image.png";
	import depositTopImage from '@/resource/images/deposit_top.png';
	import depositBottomImage from '@/resource/images/deposit_bottom.png';

	// 自定义样式
	const css = function () {
		if(this.datas.preview_color) {
			const {
				preview_color,
				time_bg_color,
				tips_bg_color,
				class_font_size,
				class_font_color,
				class_bg_color,
				class_border_radius,
			} = this.datas;

			return `
        .component-${this.id} .lottery-box {
            background-color: ${preview_color.color || '#f8f8f8'};
            background-image: url(${preview_color.isColor == 2? preview_color.image || emptyImage: ''});
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
        }

        .component-${this.id} .acitvity-relative-time-el {
          background-color: ${time_bg_color};
        }

        .component-${this.id} .activety-goods-title-bg::before {
          background-color: ${preview_color.isColor == 1? preview_color.color : '#fff'};
        }

        .component-${this.id} .panel-title {
          color: ${tips_bg_color};
        }

        .component-${this.id} .panel-title-decoration-item {
           background: linear-gradient(to bottom, ${tips_bg_color}, transparent);
        }

        .component-${this.id} .reword{
            background-color: ${class_bg_color};
            border-radius: ${class_border_radius}px;
            font-size: ${class_font_size}px;
            color: ${class_font_color};
        }
    `;
    }
	};

	export default {
		props: ['id', 'datas', 'styles'],
		data() {
			return{
				emptyImage,
				depositTopImage,
				depositBottomImage
			}
		},
		computed: {
			css() {
				return '<style>' + css.call(this) + '</style>';
			},
			className() {
				const name = ['component-wrapper', `component-${this.id}`];
				return name;
			},
		},
		watch: {},

		methods: {},

	};
</script>

<style lang="less" scoped>
  // 默认
  .component-wrapper {
    width: 375px;
  }

  .lottery-box {
    width: 100%;
    padding: 15px;
    text-align: center;
    img {
      width: 100%;
    }
    .reword {
      width: 50%;
      margin: 15px auto 0 auto;
      padding: 10px;
    }

  }

  .activity-panel {
    position: relative;
    background-color: #ffffff;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 15px;
  }

  .activety-goods-title-bg::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 75px;
    opacity: 0.1;
    border-radius: 15px 15px 0 0;
  }

  .activity-head {
    .title {
      font-size: 16px;
      color: #333;
      line-height: 16px;
      min-height: 16px;
    }
    .time {
      margin: 10px 0;
    }
    .acitvity-relative-time-el {
      margin: 0 4px;
      padding: 3px 5px;
      color: white;
      border-radius: 4px;
    }

    .acitvity-relative-time-el:first-child {
      margin-left: 10px;
    }
  }

  .panel-title {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 16px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
  }

  .panel-title-decoration {
    height: 16px;
  }

  .panel-title-decoration:first-child {
    margin-right: 18px;
  }

  .panel-title-decoration:last-child {
    margin-left: 16px;
  }

  .panel-title-decoration-item {
    display: inline-block;
    margin-left: 3px;
    width: 4px;
    height: 10px;
    transform: skew(-25deg, 10deg);
  }
</style>
